<style lang="less">
	page{
		background: #f6f6f6;
	}
	.tab{
		position: sticky;
		top: 0;
		left: 0;
		display: flex;
		width: 100%;
		margin-top: 20upx;
		z-index: 10;
		border-bottom: 1px solid #ededed;
		.tab-ttle{
			width: 50%;
			font-size:28upx;
			color:rgba(51,51,51,1);
			line-height:46upx;
			text-align: center;
			padding: 20upx 0;
			background: #FFFFFF;
		}
		.tab-ttle.active{
			background:rgba(219,194,145,1);
			color: #FFFFFF;
		}
	}
	.main{
		background: #FFFFFF;
		text-align: center;
		.main-title{
			padding: 30upx;
			box-sizing: border-box;
			border-bottom: 1px solid #ededed;
			.main-list-for{
				display: flex;
				justify-content: space-between;
				view{
					width: 33.33%;
					font-size:28upx;
					font-weight:bold;
					color:rgba(51,51,51,1);
					line-height:34upx;
				}
			}
		}
		.main-list{
			padding: 10upx 30upx;
			box-sizing: border-box;
			.main-list-for{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ededed;
				view{
					width: 33.33%;
					padding:30upx 0;
				}
				.num{
					font-size:30upx;
					font-family:'DINCond';
					font-weight:400;
					color:rgba(51,51,51,1);
					line-height:36upx;
				}
				.name{
					font-size:28upx;
					color:rgba(51,51,51,1);
					line-height:36upx;
				}
				.money{
					font-size:32upx;
					font-family:'DINCond';
					font-weight:400;
					color:rgba(51,51,51,1);
					line-height:36upx;
				}
			}
			.main-list-for:nth-child(1) .num{
				background: url("https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/first_icon.png") no-repeat center center;
				background-size: 53upx;
				font-size:30upx;
				font-weight:bold;
				color:rgba(238,183,38,1);
			}
			.main-list-for:nth-child(2) .num{
				background: url("https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/second_icon.png") no-repeat center center;
				background-size: 53upx;
				font-size:30upx;
				font-weight:bold;
				color:rgba(155,167,179,1);
			}
			.main-list-for:nth-child(3) .num{
				background: url("https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/third_icon.png") no-repeat center center;
				background-size: 53upx;
				font-size:30upx;
				font-weight:bold;
				color:rgba(179,151,104,1);
			}
			.main-list-for:last-child{
				border-bottom: none;
			}
		}
	}
	.zanwu{
		text-align: center;
	}
</style>
<template>
	<view class="container">
		<view class="tab">
			<view class="tab-ttle" :class="current == 0 ? 'active' : ''" @tap="tabs(0)">直属至尊VIP</view>
			<view class="tab-ttle" :class="current == 1 ? 'active' : ''" @tap="tabs(1)">团队至尊VIP</view>
		</view>
		<view class="main">
			<view class="main-title">
				<view class="main-list-for">
					<view>排名</view>
					<view>用户名</view>
					<view v-if='moneyType==0'>总业绩</view>
					<view v-else-if='moneyType==1'>总销售额</view>
				</view>
			</view>
			<view class="main-list">
				<view v-if="isShow==true" class="zanwu">暂无数据!</view>
				<view v-for="(itme,i) in rankInfo" class="main-list-for">
					<view class="num">{{i+1}}</view>
					<view class="name">{{itme.username}}</view>
					<view class="money">¥ {{itme.team}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	export default {
		data() {
			return {
				token:'',
				id:'',
				isShow:false,
				current:0,
				moneyType:0,//类型:0团队业绩,1销售额
				rankInfo:null//排行榜
			}
		},
		onLoad(options) {
			if(options.moneyType!='' && options.moneyType!=null){
				this.moneyType=Number(options.moneyType)
				if(this.moneyType==1){
					let name = '销售额排行榜'
					wx.setNavigationBarTitle({
					  title: name
					})
				}
				
				this.token=uni.getStorageSync('token')
				this.perforList(0)
			}
		},
		//下拉刷新
		 onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.current=0
			this.perforList(0)
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		methods: {
			async perforList(type){
				const [err, res] = await api.perforList({
						query: {
						  type:type,
						  moneyType:this.moneyType
						},
						header:{
							'Content-Type': 'application/json',
							'token': this.token
						}
					 });
				 if(res.data.code == 0){
					 this.rankInfo=res.data.data
					 if(this.rankInfo.length>0){
						this.isShow=false 
					 }else{
						 this.isShow=true
					 }
				 }
			},
			//头部切换
			tabs(type){
				if(type==0){
					this.current=0
					this.perforList(type)
				}else if(type==1){
					this.current=1
					this.perforList(type)
				}
			}
		}
	}
</script>
